<template>
  <div class="pagination">
    <el-pagination
      :page-sizes="_pageSizes"
      :page-size="_pageSize"
      :current-page="_pageNum"
      :total="_total"
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class PageManage extends Vue {
  @Prop({ type: Number, default: 20 })
  pageSize: number;

  @Prop({ type: Number, default: 1 })
  pageNum: number;

  @Prop({
    type: Array,
    default() {
      return [10, 20, 50, 100];
    },
  })
  pageSizes: number[];

  @Prop({ type: Number, default: 0 })
  total: number;

  get _pageSize() {
    return this.$parent.pageSize || this.pageSize;
  }

  get _pageNum() {
    return this.$parent.pageNum || this.pageNum;
  }

  get _pageSizes() {
    return this.$parent.pageSizes || this.pageSizes;
  }

  get _total() {
    return this.$parent.total || this.total;
  }

  handleSizeChange(val) {
    this.$emit("handleSizeChange", val);
  }

  handleCurrentChange(val) {
    this.$emit("handleCurrentChange", val);
  }
}
</script>
    
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/deep/ .el-pagination {
  padding: 0px;
  position: relative;
  right: -15px;
}
</style>
